import { Col, Row } from 'antd';
import React, { useEffect, useState } from 'react';
import ElectronForm from './ElectronForm';
import ElectronMap from './ElectronMap';

interface Props {
  data?: any;
  onFinish: Function;
}
const App = ({ data, onFinish }: Props) => {
  let [mapPoint, setMapPoint] = useState('');
  useEffect(() => {
    setMapPoint(data.fence);
    console.log(data,'---data--')
  }, [data]);
  const drawend = (val: any) => {
    setMapPoint(val);
  };
  const change = (val: any) => {
    console.log(val, '333333333');
  };
  const modifyend = (val: any) => {
    setMapPoint(val);
  };
  return (
    <div className={'myantd electron'}>
      <Row>
        <h2>编辑围栏</h2>
      </Row>
      <Row gutter={0}>
        <Col span={6}>
          <ElectronForm mapPoint={mapPoint} data={data} onFinish={onFinish} />
        </Col>
        <Col span={18}>
          <ElectronMap point={data.fence} drawend={drawend} change={change} modifyend={modifyend} />
        </Col>
      </Row>
    </div>
  );
};

export default App;
